<template>
  <div class="orderChannel">
    <el-row>
      <el-col :xs="24" :lg="10">
        <el-card class="box-card">
          <!--
          props: 配置选项
          label: 指定节点标签为节点对象的某个属性值
          children:指定子树为节点对象的某个属性值
          data	展示数据
          render-content	树节点的内容区的渲染 Function 
          -->
          <el-tree
            :props="{
                label: 'mc',
                children: 'children',
            }"
            :data="tree.data"
            :render-content="treeContent"
            :default-expand-all = true
            @node-click="treeClick">
          </el-tree>
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="14">
        <el-card class="box-card">
          <div slot="header">
             <span style="line-height: 36px;"> {{tree.select.menuName || '订单渠道'}} 详情</span>
            <el-button style="float: right;" type="success" v-if="tree.id !== 0" @click="dialogOpen('PUT', tree.select)">修改</el-button>
          </div>
          <el-form :model="tree.select" labelWidth="80px" label-position="left">
            <el-row>
              <el-col :xs="24" :lg="{span: 11, offset: 0}">
                <el-form-item prop="mc" label="渠道名称"><span>{{tree.select.mc}}</span></el-form-item>
              </el-col>
              <el-col :xs="24" :lg="{span: 11, offset: 1}">
                <el-form-item prop="code" label="渠道编号"><span>{{tree.select.code}}</span></el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :lg="{span: 11, offset: 0}">
                <el-form-item prop="ms" label="渠道描述"><span>{{tree.select.ms}}</span></el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <el-tabs v-model="dialog.activeName" @tab-click="tabsClick">
        <el-tab-pane name="orderChannel" :disabled="dialog.both">
          <span slot="label"><i class="el-icon-date"></i> {{dialog.title}}订单渠道</span>
          <s-form :form="formDialog" ref="formDialog">
            <el-row>
              <el-col :xs="24" :lg="{span: 11, offset: 0}">
                <el-form-item prop="mc" label="渠道名称">
                  <el-input
                    type="text"
                    v-model="formDialog.mc"
                    placeholder="渠道名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :lg="{span: 11, offset: 1}">
                <el-form-item prop="code" label="渠道编号">
                  <el-input
                    type="text"
                    v-model="formDialog.code"
                    placeholder="渠道编号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :lg="{span: 11, offset: 0}">
                <el-form-item prop="ms" label="描述">
                  <el-input
                    type="text"
                    v-model="formDialog.ms"
                    placeholder="描述"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </s-form>
        </el-tab-pane>
      </el-tabs>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
  </div>
</template>
<script>
  import {AutoVue} from '~/plugins/Tools';
  function __form () {
    return {
      id: { value: '', rule: [], cRemarks: '' },
      mc: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      ms: { value: '', rule: [], cRemarks: '' },
      code: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      fjd: { value: '', rule: [ 'vNull' ], cRemarks: '' },
    };
  }
  function __formFunc () {
    return {
      id: { value: '', rule: [], cRemarks: '' },
      mc: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      ms: { value: '', rule: [], cRemarks: '' },
      code: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      fjd: { value: '', rule: [ 'vNull' ], cRemarks: '' },
    };
  }
  function __form_select () {
    return {
      mc: '',
      ms: '',
      code: '',
      fjd: '',
      id: '' };
  }
  export default AutoVue({
    name: 'base_orderChannel-FEcarWms',
    head: {
      'title': '订单渠道',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 订单渠道 查看订单渠道信息' },
      ],
    },
    transition: 'slide-fade',
    store: {
      s: ['CUSTOM_customers', 'USER', 'ORDERCHANNEL'],
    },
    data: {
      tree: {
        data: [],
        select: __form_select(),
      },
      dialog: {
        title: '新增',
        saveParameter: {},
        formRef: 'formDialog',
        activeName: 'orderChannel',
        orderChannel: true,
        both: false,
      },
      formDialog: __form(),
      formDialogFunc: __formFunc(),
    },
    methods: {
      treeClick (data, node, tree) {
        this.tree.select = data;
      },
      treeContent (h, { node, data, store }) {
        return (
          <span>
            <span>
              <span>{data.lable}</span>
            </span>
            <span style="float: right; margin-right: 20px">
              <el-button size="mini" type="primary" icon="plus" on-click={ event => this.treeAppend(event, store, data) }></el-button>
            </span>
          </span>);
      },
      treeAppend (event, store, data) {
        this.dialogOpen('ADD', {store, data});
        // stopPropagation: 不再派发事件。
        event.stopPropagation();
      },
      dialogInit () {
        this.resetFields('formDialog');
      },
      async dialogOpen (type, more) {
        if (type) {
          type = type.toUpperCase();
        }
        let data = more.data || more;
        switch (type) {
        case 'ADD':
          this.dialog.title = '新增';
          this.dialog.both = true;
          this.dialog.saveParameter = more;
          if (data.id.indexOf('_') !== -1) {
            this.formDialog.fjd = '0';
          } else {
            this.formDialog.fjd = data.id;
          }
          break;
        case 'PUT':
          this.dialog.both = true;
          this.dialog.title = '修改';
          for (let index in __form()) {
            this.formDialog[index] = data[index];
          }
          break;
        }
        this.dialog.visible = true;
      },
      dialogSave () {
        let more = this.dialog.saveParameter;
        if (this.dialog.title === '新增') {
          this.VALIDATE('formDialog', async (option) => {
            try {
              await this.post('/wmsorderchannel/add', option);
              this.dialogInit();
              this.dialog.visible = false;
              this.SET('ORDERCHANNEL', await this.post('/wmsorderchannel/list'));
              this.tree.data = [{
                id: '0',
                lable: '订单渠道',
                orderChannelLevel: '-1',
                children: Object.assign(this.ORDERCHANNEL.orderChannel),
              }];
            } catch (err) {
              console.log(err);
            }
          });
        } else {
          this.VALIDATE('formDialog', async (option) => {
            try {
              let {data} = await this.post('/wmsorderchannel/edit', option);
              this.tree.select = data;
              this.dialogInit('');
              this.dialog.visible = false;
              this.SET('ORDERCHANNEL', await this.post('/wmsorderchannel/list'));
              this.tree.data = [{
                id: '0',
                lable: '订单渠道',
                orderChannelLevel: '-1',
                children: Object.assign(this.ORDERCHANNEL.orderChannel),
              }];
            } catch (err) {
              console.log(err);
            }
          });
        }
      },
      tabsClick (tab, event) {
        console.log(tab, event);
      },
    },
    async mounted () {
      /*
      this.tree.data = [{
        // children: await this.post('/sysMenu/getMenus'),
        children: await this.post('/wmsorderchannel/list'),
      }];
      */
      if (this.ORDERCHANNEL.orderChannel.length === 0) {
        this.SET('ORDERCHANNEL', await this.post('/wmsorderchannel/list'));
      }
      this.tree.data = [{
        id: '0',
        lable: '订单渠道',
        orderChannelLevel: '-1',
        children: this.ORDERCHANNEL.orderChannel,
      }];
    },
  });
</script>
<style scoped="" lang="scss">
  .box-card{
    margin: 20px;
  }
</style>

<style lang="scss">
  .orderChannel{
    width: 88vw;
    float: left;
  }
</style>
